<script lang="ts" setup>
import bg1 from '@/assets/images/nft/nft-bg-1.png';
import bg2 from '@/assets/images/nft/nft-bg-2.png';
import bg3 from '@/assets/images/nft/nft-bg-3.png';
</script>

<template>
  <div class="bg-[#CDDFF7] absolute right-0 left-0 top-0 h-[148px] xs:hidden" />
  <div class="border-b-[#BED4FF] border-b-[1px]">
    <div
      class="start-wrapper relative flex flex-column items-center overflow-hidden"
    >
      <div
        class="nft-bg relative w-[440px] h-[294px] xs:w-[324px] xs:h-[216px]"
      >
        <img
          :src="bg1"
          alt=""
          class="absolute top-0 left-8 z-10 float-animation xs:w-[260px] xs:h-[170px]"
        />
        <img
          :src="bg2"
          alt=""
          class="absolute left-0 bottom-4 float-animation xs:w-[60px] xs:h-[70px]"
        />
        <img
          :src="bg3"
          alt=""
          class="absolute right-0 bottom-0 float-animation xs:w-[178px] xs:h-[200px]"
        />
      </div>
      <div class="nft-dev">Under development...</div>
      <div class="nft-slogan">Each SharkDAO's identity is unique to NFT!</div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.start-wrapper {
  background: white;
  border-radius: 16px 16px 0px 0px;
  border-top: 1px solid #bed4ff;
  border-left: 1px solid #bed4ff;
  border-right: 1px solid #bed4ff;
  @apply xl:mx-[98px] lg:mx-[88px] md:mx-[68px] sm:mx-[50px] xs:mx-[24px] xs:border-none xs:h-auto pt-[132px] md:pl-[116px] md:pt-[82px] sm:pl-[86px] sm:pt-[52px] xs:pt-[126px];

  .nft-dev {
    font-size: 18px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #7a7893;
    margin-top: 36px;
  }
  .nft-slogan {
    font-size: 14px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #7a7893;
    margin-top: 14px;
    margin-bottom: 250px;
    @apply xs:mb-[196px];
  }
}
</style>
